<template>
	<view class="preview">
		<swiper  :autoplay="false" circular @change="swiperChange" :current="previewIndex">
			<swiper-item v-for="(i,index) in classList" :key="i._id">
				<image :src="i.picurl" mode="aspectFill" @click="maskChange"
				 v-if="previewIndex==index || previewIndex==index+1 || previewIndex==index-1"></image>
			</swiper-item>
		</swiper>
		<view class="mask" v-if="maskShow">
			<view class="viv" >
				
			</view>
			<view class="goBack" @click="goBack">
				<uni-icons type="back" size="30" color="#efefef"></uni-icons>
			</view>
			<view class="count">{{previewIndex+1}}/{{classList.length}}</view>
			<view class="time"><uni-dateformat :date="Date.now()" format="hh:mm" class="timeN"></uni-dateformat></view>
			<view class="date"><uni-dateformat :date="Date.now()" format="MM月dd日" class="dateN"></uni-dateformat></view>
			<view class="footer">
				<view class="box" @click="open">
					<uni-icons type="info" size="15"></uni-icons>
					<view class="content">信息</view>
				</view>
				<view class="box" @click="toScore">
					<uni-icons type="star" size="15"></uni-icons>
					<view class="content">{{imgPreview.score}}分</view>
				</view>
				<view class="box" @click="downLoad">
					<uni-icons type="download" size="15"></uni-icons>
					<view class="download">下载</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="infopopup">
				<view class="popupheader">
					<view></view>
					<view class="title">壁纸信息</view>
					<view class="close" @click="close">
						<uni-icons type="closeempty" size="15" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="true" >
					<view class="row">
						<view class="left">
							壁纸ID:
						</view>
						<view class="right" style="font-size: 30rpx;">
							{{imgPreview.classid}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							发布者:
						</view>
						<view class="right">
							{{imgPreview.nickname}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							评分:
						</view>
						<view class="right start">
							<uni-rate :readonly="true" :value="imgPreview.score" size="36rpx"/>
							<text>{{imgPreview.score}}分</text>
						</view>
					</view>
					<view class="row">
						<view class="left">
							摘要:
						</view>
						<view class="right" style="font-size: 30rpx;">
							{{imgPreview.description}}
						</view>
					</view>
					<view class="row">
						<view class="left">
							标签:
						</view>
						<view class="right tab">
							<span v-for="(i,index) in imgPreview.tabs" :key="index">
								<uni-tag :text="i" circle inverted type="success"></uni-tag>
							</span>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="popupScore"  :animation="false">
			<view class="popupScore">
				<view class="popupheader">
					<view></view>
					<view class="title">壁纸评分</view>
					<view class="close" @click="closeScore">
						<uni-icons type="closeempty" size="15" color="#999"></uni-icons>
					</view>
				</view>
				<view class="score">
					<uni-rate v-model="score" @change="onChange" />
					<text>{{score}}分</text>
				</view>
				<view class="yes">
					<button @click="submit">确认评分</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import {onMounted, ref} from "vue"
import {onLoad} from "@dcloudio/uni-app"
import {request} from "../../utils/request.js"
let maskShow = ref(true)
const popup = ref(null)
const popupScore = ref(null)
let id = ref('')
let imgPreview = ref({})
let classList = ref(uni.getStorageSync("classList") || [])
let previewIndex = ref(0) 
let score = ref(0)
let settingImg = ref(false)
onLoad((e)=>{
	id.value = e.id
	// "shareAppMessage"表示“发送给朋友”按钮，"shareTimeline"表示“分享到朋友圈”按钮
		wx.showShareMenu({
			menus: ['shareAppMessage', 'shareTimeline'],// 需要显示的转发按钮名称列表.合法值包含 "shareAppMessage"、"shareTimeline"
			success(res) {
				console.log(res);
			},
			fail(e) {
				console.log(e);
			}
		});
})
onMounted(()=>{
	replacement()
	getPriviewIndex()
	getDetailWall()
})
// 获取壁纸详情
const getDetailWall = () =>{
	// request({
	// 	url:"/detailWall",
	// 	data:{
	// 		id:id.value
	// 	}
	// }).then(res=>{
	// 	imgPreview.value = res.data.data[0] || {}
	// 	console.log("壁纸详情",imgPreview.value);
	// })
	imgPreview.value = classList.value[previewIndex.value] || {}
}
//替换壁纸格式
const replacement = () =>{
	classList.value = classList.value.map((item)=>{
		return {
			...item,
			picurl:item.smallPicurl.replace("_small.webp",".jpg")
		}
	})
}
//获取当前图片索引
const getPriviewIndex = () =>{
	previewIndex.value = classList.value.findIndex(item => item._id == id.value)
}
//图片滑动事件
const swiperChange = (e) =>{
	previewIndex.value = e.detail.current
	id.value = classList.value[previewIndex.value]._id
	getDetailWall()
}
//下载图片
const downLoad = () =>{
	// #ifdef H5
	uni.showModal({
		title:"长按图片进行保存"
	})
	// #endif
	
	// #ifndef H5
	uni.getImageInfo({
			src: classList.value[previewIndex.value].picurl,
			success: function (image) {
				uni.saveImageToPhotosAlbum({
					filePath:image.path,
					success:function(res){
						addScoreWall("download")
						console.log("下载成功");
					},
					fail:function(res){
						if(res.errMsg == "saveImageToPhotosAlbum:fail cancel"){
							return
						}
							uni.showModal({
								title:"重新打开相册权限",
								success: (res) => {
									if(res.confirm){
										uni.openSetting({
											success(res) {
											    console.log(res.authSetting)
											},
											fail(res){
												console.log(res.authSetting)
											}
										})
									}else{
										console.log("拒绝授权");
									}
								}
							})
					},
					complete:function(res){
						
						// console.log("回调");
					}
				})
			}
		})
	
	// #endif
}
const maskChange = () =>{
	maskShow.value = !maskShow.value
}
const open = () =>{
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
    popup.value.open('bottom')
}
const close = () =>{
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
    popup.value.close()
}
const toScore = ()=>{
	popupScore.value.open('center')
}
const closeScore = ()=>{
	popupScore.value.close()
}
// 提交评分
const submit = () =>{
	request({
		url:"/setupScore",
		data:{
			classid:imgPreview.value.classid,
			wallId:imgPreview.value._id,
			userScore:score.value
		}
	}).then(res=>{
		if(res.data.errCode == 0){
			uni.showToast({
				title:"评分成功",
				icon:"none"
			})
			addScoreWall("score")
			popupScore.value.close()
		}else{
			
		}
	})
	
}
//添加评分图片到数据库
const addScoreWall = (type) =>{
	imgPreview.value.type = type
	uniCloud.callFunction({
		name:"setScoreDownload",
		data:{
			imgPreview:imgPreview.value
		}
	}).then(res=>{
		
	})
}
// 返回上一页面
const goBack = () =>{
	uni.navigateBack({
		success: (res) => {
			
		},
		fail: (res) => {
			uni.reLaunch({
				url:"/pages/index/index"
			})
		}
	})
}
//分享信息
const onShareAppMessage = () => {
	return {
		title: '邀请您使用XXX小程序', // 分享出的卡片标题
		path: 'pages/index/index', // 他人通过卡片进入小程序的路径，可以在后面拼接URL的形式带参数
		imageUrl: '/static/mainImg/logosareas.jpg', // 分享出去的图片，默认为当前页面的截图。图片路径可以是本地文件路径或者网络图片路径。支持PNG及JPG。
	};
}
//分享到朋友圈
const onShareTimeline = () => {
	return {
		title: '邀请您使用XXX小程序', // 分享出的卡片标题
		path: 'pages/index/index', // 他人通过卡片进入小程序的路径，可以在后面拼接URL的形式带参数
		imageUrl: '/static/mainImg/logosareas.jpg', // 分享出去的图片，默认为当前页面的截图。图片路径可以是本地文件路径或者网络图片路径。支持PNG及JPG。
	};
}
</script>

<style lang="scss">
.preview{
	width: 100%;
	height: 100vh;
	position: relative;
	swiper{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.mask{
		position: absolute;
		left: 0;
		top: 0;
		.goBack{
			position: absolute;
			top: 5vh;
			left: 2vh;
			width: 90rpx;
			height: 90rpx;
			border: 1rpx solid #efefef;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.count{
			position: absolute;
			top: 10vh;
			left: 375rpx;
			background: rgba(0, 0, 0, 0.2);
			color: #fff;
			border-radius: 30rpx;
			padding: 10rpx;
			transform: translate(-50%,0);
			font-size: 30rpx;
		}
		.time{
			position: absolute;
			width:fit-content;
			font-size: 140rpx;
			line-height: 1em;
			top: 15vh;
			left: 375rpx;
			transform: translate(-50%,0);
			color: #fff;
			text-shadow: 1px 1px 2px black;
			.timeN{
				white-space:nowrap;
			}
		}
		.date{
			position: absolute;
			font-size: 30rpx;
			line-height: 1em;
			top: 30vh;
			left: 375rpx;
			transform: translate(-50%,0);
			color: #fff;
			white-space:nowrap;
			.dateN{
				white-space:nowrap;
			}
		}
		.footer{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: rgba(255, 255, 255, 0.7);
			padding: 20rpx 62rpx;
			border-radius: 80rpx;
			width: 480rpx;
			position: absolute;
			top: 80vh;
			left: 375rpx;
			transform: translate(-50%,0);
			.box{
				font-size: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.infopopup{
		background: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		.popupheader{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-size: 30rpx;
				color: #999;
			}
			.close{
			}
		}
		scroll-view{
			height: 40vh;
		}
		.row{
			display: flex;
			align-items: center;
			padding: 21rpx 30rpx;
			.left{
				font-size: 35rpx;
				color: #999;
				width: 140rpx;
				text-align: right;
			}
			.right{
				font-size: 40rpx;
				margin-left: 20rpx;
				width:450rpx;
				span{
					margin-right: 10rpx;
					margin-top: 25rpx;
				}
			}
			.tab{
				display: flex;
				flex-wrap: wrap;
				text-align: left;
			}
			.start{
				display: flex;
				align-items: center;
				text{
					font-size: 35rpx;
					color: rgb(255, 202, 62);
				}
			}
		}
	}
	.popupScore{
		background: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		overflow: hidden;
		width: 540rpx;
		height: 340rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		.popupheader{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				font-size: 30rpx;
				color: #999;
			}
			.close{
			}
		}
		.score{
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 35rpx;
				color: rgb(255, 202, 62);
			}
		}
		.yes{
			width: 167rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			button{
				font-size: 24rpx;
				background-color: rgba(255, 255, 255, 0);
				border: 1px solid black;
			}
		}
	}
}
</style>
